<template>
  <div class="navs">
    <div class="move">
      <pie class="mypie"></pie>
      <div class="base">
        <div class="Theborder">
          <span class="fss">基站联通</span>
          <span class="fonts">共计: <span>9279</span></span>
          <el-progress
            class="pink"
            :percentage="percentage"
            :color="blue"
          ></el-progress>
          <span class="fontTop">宏站<span>6562</span></span>
          <span class="fontBotton">室分<span>2717</span></span>
        </div>
      </div>
    </div>
    <div class="baseBotton">
      <div class="Theborder">
        <span class="fss">基站电信</span>
        <span class="fonts">共计: <span>888</span></span>
        <el-progress
          class="pink"
          :percentage="percentage"
          :color="pink"
        ></el-progress>
        <span class="fontTop">宏站<span>6562</span></span>
        <span class="fontBotton">室分<span>2717</span></span>
      </div>
    </div>

    <div class="eight">888</div>
    <div class="count">基站总数</div>
  </div>
</template>

<script>
import Pie from "./componets/GhjsPie.vue";
export default {
  
  components: { Pie },
  data() {
    return {
      percentage: 20,
      
       blue: "#409eff",
       pink:'#F57D7D'
      
    }
  },

  mounted() {},

  methods: {
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
  },
};
</script>

<style lang="less" scoped>
.navs {



  position: relative;
  .mypie {
   position: absolute;
   left: -100px;
   top: -60px;
  }
  .eight {
    font-size: 18px;
    color: #fff;
    position: absolute;
    top: 120px;
    left: 85px;
  }
  .count {
    font-size:14px;
    color: #fff;
    position: absolute;
    top: 140px;
    left: 70px;
  }
  .base {
    position: absolute;
    top: 60px;
    left: 170px;
    width: 200px;
    height: 70px;
    background: url("../../assets/img/电信背景.png") no-repeat;
    background-size: 100% 100%;
    .Theborder {
      position: absolute;
      width: 190px;

      height: 100px;
      .fss {
        color: #fff;
        position: absolute;
        left: 25px;
        top: 7px;
        font-size: 13px;
      }
      .fonts {
        font-size: 13px;
        color: #fff;
        position: absolute;
        top: 7px;
        left: 120px;
      }
      .pink {
        width: 190px;
        margin: 27px 18px;
        color: pink;
      }
      .fontTop {
        position: absolute;
        top: 47px;
        left: 20px;
        color: #4A74B2;
      }
      .fontBotton {
        position: absolute;
        top: 47px;
        left: 120px;
        color: #1E5A9A;
      }
    }
  }
  .baseBotton {
    position: absolute;
    left: 170px;
    top: 150px;
    width: 200px;
    height: 70px;
    background: url("../../assets/img/电信背景.png") no-repeat;
    background-size: 100% 100%;
    .Theborder {
      position: absolute;
      width: 200px;

      height: 100px;
      .fss {
        font-size: 13px;
        color: #fff;
        position: absolute;
        left: 25px;
        top: 10px;
      }
      .fonts {
        font-size: 13px;
        color: #fff;
        position: absolute;
        top: 10px;
        left: 120px;
      }
      .pink {
        width: 190px;
        margin: 27px 18px;
        color: pink;
      }
      .fontTop {
        position: absolute;
        top: 47px;
        left: 20px;
        color: #D37177;
      }
      .fontBotton {
        position: absolute;
        top: 47px;
        left: 120px;
        color: #1E5A9A;
      }
    }
  }
}
</style>
